﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<title>文化节</title>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/app/adaptation.js"></script>
	</head>
	<body>
		<!--loading-->
		<div id="loading">
			<div class="progress"></div>
		</div>
		
		<div id="wrap">
			<a href="javascript:void(0);" class="icon-play music"></a>
			<!--首页-->
			<div class="page page-1">
				<div class="txt-title"></div>
				<a href="javascript:void(0);" class="icon-btn-start start"></a>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-btn-prize prizes"></a>
					<a href="javascript:void(0);" class="icon-btn-rule rules"></a>
				</div>
			</div>
			
			<!--场景-->
			<div class="page page-2">
				<div class="swiper-container">
				    <div class="swiper-wrapper">
				        <div class="swiper-slide slide-1">
				        	<div class="txt-slide-txt-1 top ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				        </div>
				        <div class="swiper-slide slide-2">
				        	<div class="txt-slide-txt-2 top ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				        </div>
				        <div class="swiper-slide slide-3">
				        	<div class="txt-slide-txt-3 bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				        </div>
				        <div class="swiper-slide slide-4">
				        	<div class="txt-slide-txt-4 top ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				        </div>
				        <div class="swiper-slide slide-5">
				        	<div class="txt-slide-txt-5 bottom ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
				        </div>
				        <div class="swiper-slide slide-6">
				        	<div class="txt-title-2"></div>
							<div class="img-box">
								<img src="img/poster.jpg" alt="" />
								<a href="javascript:void(0);" class="icon-video-play" data-src="http://o9iwupqo7.bkt.clouddn.com/o_1an2603gdf6p1t6h1bno122o1lfi7.mp4"></a>
							</div>
							<div class="txt-zhufu-1"></div>
							<div class="btn-group">
								<a href="javascript:void(0);" class="icon-btn-share share"></a>
								<a href="javascript:void(0);" class="icon-btn-zhufu-1 zhufu"></a>
							</div>
				        </div>
				    </div>
				</div>
				<span class="icon-arrow"></span>
			</div>
		</div>
		
		<!--分享-->
		<div class="share-box">
			<div class="light"></div>
		</div>
		
		<!--视频弹窗-->
		<div class="video-mark J_videoMark">
	        <div class="video-pop">
	            <div class="video-con">
	                <span class="video-close">&times;</span>
	                <div id="videoBox"></div>
	            </div>
	        </div>
	    </div>
	    
		<div style="display: none;">
			<!--我的奖品-->
			<div id="prize-box">
				<div class="icon-prize-title title"></div>
				
				<!--<div class="no-prize">
					没有获得奖品
				</div>-->
				
				<div class="prize-list">
					<ul>
						<li>奖品的名字</li>
					</ul>
					<a href="javascript:void(0);" class="icon-btn-registe register"></a>
				</div>
				
				<div class="tips">
					<p>1、中奖用户请填写您的手机和姓名，作为领奖凭证。</p>
					<p>2、请在x月x日前，前往xxxx领取奖品地址：xxxxxxxxxxxxxx</p>
					<p>3、详细地址：xxxxxxxxxxxxxx</p>
				</div>
				
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-home layer-close"></a>
				</div>
			</div>
			
			<!--活动规则-->
			<div id="rule-box">
				<div class="icon-rule-title title"></div>
				<div class="scroll">
					<div class="content">
						<p>1、活动规则活动规则活动规则活动规则活动规则活动规则活动规则</p>
						<p>2、活动规则活动规则活动规则活动</p>
						<p>3、活动规则活动规则活动规则活动</p>
						<p>4、活动规则活动规则活动规则活动</p>
						<p>5、活动规则活动规则活动规则活动</p>
						<p>6、活动规则活动规则活动规则活动</p>
						<p>7、活动规则活动规则活动规则活动</p>
						<p>8、活动规则活动规则活动规则活动</p>
						<p>9、活动规则活动规则活动规则活动</p>
						<p>10、活动规则活动规则活动规则活动</p>
						<p>11、活动规则活动规则活动规则活动</p>
						<p>12、活动规则活动规则活动规则活动</p>
						<p>13、活动规则活动规则活动规则活动</p>
						<p>14、活动规则活动规则活动规则活动</p>
						<p>15、活动规则活动规则活动规则活动</p>
					</div>
				</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-home layer-close"></a>
				</div>
			</div>
			
			<!--填写信息-->
			<div id="info-box">
				<div class="icon-info-title"></div>
				<p>请留下您的手机号和名字，作为领奖凭证</p>
				<div class="item">
					<label>手机号</label>
					<input type="tel" id="phone" name="phone" maxlength="11"/>
				</div>
				<div class="item">
					<label>姓　名</label>
					<input type="text" id="username" name="username"/>
				</div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-submit subForm"></a>
					<a href="javascript:void(0);" class="icon-cancle layer-close"></a>
				</div>
			</div>
			
			<!--祝福弹窗-->
			<div id="zhufu-box">
				<div class="icon-title-box title"></div>
				<div class="icon-box"></div>
				<div class="txt-zhufu-2"></div>
				<input type="text" placeholder="请输入祝福内容"/>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-btn-zhufu-2 bless"></a>
					<a href="javascript:void(0);" class="icon-back layer-close"></a>
				</div>
			</div>
			
			<!--中奖弹窗-->
			<div id="result-box-1">
				<div class="txt-result-1 tip"></div>
				<div class="prizeName"></div>
				<p>请留下您的手机号和名字，作为领奖凭证</p>
				<div class="item">
					<label>手机号</label>
					<input type="tel" id="phone" name="phone" maxlength="11"/>
				</div>
				<div class="item">
					<label>姓　名</label>
					<input type="text" id="username" name="username"/>
				</div>
				<p class="txt">请在x月x日前，前往xxxx领取奖品</p>
				<p class="txt">地址：xxxxxxxxxxxxxx</p>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-submit subForm"></a>
					<a href="javascript:void(0);" class="icon-cancle layer-close"></a>
				</div>
			</div>
			
			<!--未中奖弹窗-->
			<div id="result-box-2" class="result-box">
				<div class="txt-result-2 tip"></div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-sure layer-close"></a>
				</div>
			</div>
			
			<!--已抽奖弹窗-->
			<div id="result-box-3" class="result-box">
				<div class="txt-result-3 tip"></div>
				<div class="btn-group">
					<a href="javascript:void(0);" class="icon-sure layer-close"></a>
				</div>
			</div>
		</div>
		
		<script src="js/app/app.js"></script>
		<script src="js/lib/layer.m/layer.m.js"></script>
		<script>
			var remind = function(content,time){
				var str= '<div class="modal"><div id="remind" class="icon-remind-bg"><div class="content">'+content+'</div></div></div>';
				$('body').append(str);
				var time = time?time:1500;
				setTimeout(function(){
					$(".modal").remove();
				},time);
			};
			
			$(function(){
				//数据预加载

				//定义相关JSON格式文件列表
				var cdn_path = "";
				
				var manifest=[
						{id:"audio",src:cdn_path+"audio/bgm.mp3"},
						cdn_path+"img/share.js",
						cdn_path+"img/txt-sf9fc470385.png"
					];
				
				var preload;
				
				//开始预加载
				function startPreload() {
				    preload = new createjs.LoadQueue(true);
					preload.installPlugin(createjs.Sound);
				    preload.installPlugin(createjs.Sound);
				    preload.setMaxConnections(100);
				    preload.on("fileload", handleFileLoad);
				    preload.on("progress", handleFileProgress);
				    preload.on("complete", loadComplete);
				    preload.on("error", loadError);
				    preload.loadManifest(manifest);
				 
				}
				
				//处理单个文件加载
				function handleFileLoad(event) {
				    if(event.item.type=="sound"){
				    	createjs.Sound.play("audio",{loop:-1});
				    }
				}
				 
				function loadError(evt) {
				    alert(evt.text);
				}
				
				//已加载完毕进度 
				function handleFileProgress(event) {
				    var progress = (preload.progress*100|0) + "%";
				    $(".progress").html(progress);
				}
				
				//全度资源加载完毕
				function loadComplete(event) {
					shareAnimate = frameAnimation.anims($(".light"),share,1.5,1);
					$(".light").css({
						"background": "url("+share[0]+") no-repeat"
					});
					$("#loading").hide();
					$("#wrap").addClass("show");
				}
				
				startPreload();
				
				//背景乐
				$(".music").click(function(){
					var isPlay = $(this).hasClass("icon-play");
					if(isPlay){
						$(this).removeClass("icon-play").addClass("icon-pause");
						createjs.Sound.stop();
					}else{
						$(this).removeClass("icon-pause").addClass("icon-play");
						createjs.Sound.play("audio",{loop:-1});
					}
				});
				
				//swiper
				var mySwiper = new Swiper ('.swiper-container', {
				    direction: 'vertical',
				    effect: 'fade',
				    speed: 500,
				    onInit: function(swiper){
					    swiperAnimateCache(swiper);
					    swiperAnimate(swiper);
					}, 
					onSlideChangeEnd: function(swiper){ 
					    swiperAnimate(swiper);
					},
					onReachEnd: function(swiper){
						$(".icon-arrow").hide();
					},
					onSlideNextEnd: function(swiper){
				        if(swiper.isEnd){
				        	swiper.lockSwipes();
				        }
				    },
				    onSliderMove: function(swiper){
				    	if(!swiper.isEnd){
				    		$(".icon-arrow").show();
				    	}
				    }
				});
				
				$(".txt-slide-txt-1").removeClass("fadeInDown");
				
				//开始我的故事
				$(".start").click(function(){
					$(".page-1").css({zIndex:0,opacity:0});
					$(".page-2").addClass("show");
					$(".txt-slide-txt-1").addClass("fadeInDown");
				});
				
				//分享
				$(".share").click(function(){
					$(".share-box").show();
					setTimeout(function(){
						$(".share-box").addClass("show");
					},50)
					setTimeout(function(){
						shareAnimate.start();
					},100);
				});
				
				$(".share-box").click(function(){
					$(this).removeClass("show");
					setTimeout(function(){
						$(".share-box").hide();
						$(".light").css({
							"background": "url("+share[0]+") no-repeat"
						});
					},300);
				});
				
				//播放视频
				$(".icon-video-play").click(function(){
					var vurl = $(this).data('src');
					$("#videoBox").html('<video src="' + vurl + '" controls="controls" id="tsvideo"></video>').show();
				    setTimeout(function() {
				        $("#videoBox").children().get(0).play();
				        $('.J_videoMark').addClass("show");
				    }, 16);
				    $('.J_videoMark').show();
				});
				
				$('.J_videoMark .video-close').click(function() {
				    $('.J_videoMark').hide().find('#videoBox').html('');
				    $('.J_videoMark').removeClass("show");
				});
				$('.J_videoMark').click(function(event){
				    var target = $(event.target)
				    if(target.hasClass('.video-pop') || target.parents('.video-pop').length){
				        return;
				    }
				    $('.J_videoMark').hide().find('#videoBox').html('');
				    $('.J_videoMark').removeClass("show");
				});
				
				//关闭弹窗
				$(document).on('click','.layer-close',function(){
					layer.closeAll();
				});
				
				//规则
				$(".rules").click(function(){
					layer.open({
						content: $("#rule-box")[0].outerHTML,
						shadeClose: false,
						className: "icon-layer-bg"
					});
					
					setTimeout(function(){
						myScroll = new IScroll('.layermbox .scroll',{
							scrollY: true,
							scrollbars: 'custom',
							preventDefaultException: { tagName: /^(DIV|IMG|A|BUTTON|INPUT)$/ }
						});
					},50)
				});
				
				//我的奖品
				$(".prizes").click(function(){
					layer.open({
						content: $("#prize-box")[0].outerHTML,
						shadeClose: false,
						className: "icon-layer-bg"
					});
				});
				
				//填写信息
				$(document).on('click','.register',function(){
					layer.open({
						content: $("#info-box")[0].outerHTML,
						shadeClose: false,
						className: "icon-result-bg"
					})
				});
				
				//提交信息
				$(document).on('click','.subForm',function(){
					var phone = $.trim($(".layermbox #phone").val());
					var username = $.trim($(".layermbox #username").val());
					if(phone==""){
						remind("请填写手机号");
						return;
					}
					if(!/^1[34578]\d{9}/.test(phone)){
						remind("请填写正确的手机号码");
						return false;
					}
					if(username==""){
						remind("请填写姓名");
						return false;
					}
					
					$.ajax({
						type:"get",
						url:"data/data.json",
						dataType: 'json',
						data: {phone:phone,username:username},
						success: function(data){
							if(data.status){
								remind("提交成功");
								layer.closeAll();
								$(".register").hide();
							}
						}
					});
				});
				
				$(".zhufu").click(function(){
					layer.open({
						content: $("#zhufu-box")[0].outerHTML,
						shadeClose: false,
						className: "icon-layer-bg"
					});
				});
				
				//送出祝福
				$(document).on('click','.bless',function(){
					var bless = $.trim($(this).parent().prev().val());
					if(bless==""){
						remind("请输入祝福内容");
						return;
					}
					$.ajax({
						type:"get",
						url:"data/result.json",
						dataType: "json",
						data: {bless:bless},
						success: function(data){
							var status = data.status;
							switch(status){
								case 1: 
									//中奖
									$(".prizeName").text(data.prizeName);
									layer.open({
										content: $("#result-box-1")[0].outerHTML,
										shadeClose: false,
										className: "icon-layer-bg"
									});
									break;
								case 2: 
									//未中奖
									layer.open({
										content: $("#result-box-2")[0].outerHTML,
										shadeClose: false,
										className: "icon-result-bg"
									});
									break;
								case 3: 
									//已抽奖
									layer.open({
										content: $("#result-box-3")[0].outerHTML,
										shadeClose: false,
										className: "icon-result-bg"
									});
									break;
							}
						}
					});
				});
			});
		</script>
	</body>
</html>